<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <meta name="keywords" content="">
    <meta name="description" content="">

    <link rel="shortcut icon" href="favicon.ico">
    <link href="${ctx!}/assets/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="${ctx!}/assets/css/font-awesome.css?v=4.4.0" rel="stylesheet">

    <link href="${ctx!}/assets/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">

    <link href="${ctx!}/assets/css/animate.css" rel="stylesheet">
    <link href="${ctx!}/assets/css/style.css?v=4.1.0" rel="stylesheet">
    <link href="${ctx!}/assets/css/admin-main.css" rel="stylesheet">
    <link href="${ctx!}/assets/css/alarm.css" rel="stylesheet">
    <link href="${ctx!}/assets/css/cubic.css" rel="stylesheet">
    <link href="${ctx!}/assets/css/foot.css" rel="stylesheet">
    <link href="${ctx!}/assets/css/sidebar-menu1.css" rel="stylesheet">

    <style>
        .layui-layer-title {
            background-color: #1a2f42 !important;
            color: white !important;
        }
    </style>

</head>

<body style="background-color:transparent;">
<div class="top-div">
    <div class="cubic">
        <ul>
            <li><a href="${ctx!}/web/project/livedata">&nbsp;实时数据&nbsp;</a></li>
            <li><a href="${ctx!}/web/project/data/livecurve">&nbsp;实时曲线&nbsp;</a></li>
            <li class="current"><a href="${ctx!}/web/project/data/historycurve">&nbsp;历史曲线&nbsp;</a></li>
        </ul>
    </div>
    <div class="tabe_div" style="margin-top: 20px">
        <form method="post" id="eventqueryform" style="display: inline; ">
            <a class="find_a" style="margin-left: 20px"> 时间范围：</a><input
                    style="width: 150px!important; padding: 1px!important; vertical-align: middle!important;"
                    id="startTimeSearch" name="startTimeSearch" class="laydate-icon layer-date">
            <a class="find_a"> - </a><input
                    style="width: 150px!important; padding: 1px!important; vertical-align: middle!important; margin-right: 20px"
                    width="100px" id="endTimeSearch" name="endTimeSearch" class="laydate-icon layer-date">
            <select style="width: 100px!important; padding: 1px!important; margin-right: 20px" id="mode" name="mode">
                <option value="hour" selected="selected">单位：时</option>
                <option value="day">单位：天</option>
                <option value="month">单位：月</option>
                <option value="year">单位：年</option>
            </select>
            <input type="button" class="but_find" value="加载" onclick="loadChart();"
                   style="width: 40px;padding: 1px!important; vertical-align: middle!important; ">
        </form>
    </div>
</div>

<div class="foot-div">
    <div id="show-panel" class="col-sm-9 show-panel"
         style=" padding: 15px 7px 15px 15px!important;height: 100%; width: 100% position: absolute">
        <div id="main"></div>
    </div>

    <div class="col-sm-3 text-panel"
         style="padding: 15px 15px 15px 7px!important;height: 100%; width: 100% position: absolute">
        <div style="overflow: hidden">
            <div>
                <div style="display: inline">
                    选择变量
                </div>
                <div style="display: inline; float: right">
                    <input type="button" value="+添加" id="eventadd" onclick="add();" class="but"/>
                    <input type="button" value="-删除" id="eventdel" onclick="del();" class="but"/>
                </div>
            </div>
            <div style="width: 100%; margin-top: 10px">
                <input style="width: 100%;" type="text" class="form_input text_ient" name="name" placeholder="请输入搜索内容"/>
            </div>
            <div style="width: 100%; height: 100%; display: block; margin-top: 10px; top:80px;  overflow:auto; clear:both;">
                <div id="accordion" class="dropdown">
                    <#if (categories?size>0) >
                        <#list categories as category>
                            <div>
                                <div class="collapse-title" data-toggle="collapse" data-parent="#accordion"
                                     data-target=".collapse${category.id}">
                                    <span class="fa fa-caret-down"></span>
                                    <a>&nbsp;${category.name}</a>
                                </div>
                                <ul>
                                    <#if (category.devices?size>0) >
                                        <#list category.devices as device>
                                            <li href="${device.id}">
                                                <div id="collapse"
                                                     class="collapse${category.id} collapse-content collapse in">
                                                    <a>${device.name}</a>
                                                </div>
                                            </li>
                                        </#list>
                                    </#if>
                                </ul>
                            </div>
                        </#list>
                    </#if>

                </div>

                <br>
                <br>
                <br>
                <br>

            </div>
        </div>
    </div>
</div>
<#--<div class="wrapper wrapper-content  animated fadeInRight">-->
<#--<table cellspacing="0" cellpadding="0" rules="cols" id="table_list" class="table_style table-striped" style="margin: 0 auto" >-->
<#--</table>-->
<#--</div>-->

<!-- 全局js -->
<script src="${ctx!}/assets/js/jquery.min.js?v=2.1.4"></script>
<script src="${ctx!}/assets/js/bootstrap.min.js?v=3.3.6"></script>

<!-- Bootstrap table -->
<script src="${ctx!}/assets/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
<script src="${ctx!}/assets/js/plugins/bootstrap-table/bootstrap-table-mobile.min.js"></script>
<script src="${ctx!}/assets/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>

<!-- Peity -->
<script src="${ctx!}/assets/js/plugins/peity/jquery.peity.min.js"></script>

<script src="${ctx!}/assets/js/plugins/validate/jquery.validate.min.js"></script>
<script src="${ctx!}/assets/js/plugins/validate/messages_zh.min.js"></script>
<script src="${ctx!}/assets/js/plugins/layer/layer.min.js"></script>
<script src="${ctx!}/assets/js/plugins/layer/laydate/laydate.js"></script>


<script src="${ctx!}/assets/js/echarts.min.js"></script>
<!-- 自定义js -->
<script src="${ctx!}/assets/js/content.js?v=1.0.0"></script>

<!-- Page-Level Scripts -->
<script>
    $(document).ready(function () {//外部js调用
        var endDate = laydate.render({
            theme: "#23b7e5",
            elem: '#endTimeSearch', //目标元素。由于laydate.js封装了一个轻量级的选择器引擎，因此elem还允许你传入class、tag但必须按照这种方式 '#id .class'
            event: 'click',//响应事件。如果没有传入event，则按照默认的click
            format: 'yyyy-MM-dd HH:mm:ss',
            type: 'datetime',
            max: 0,
            done: function (value, date) {
                if (value !== '') {
                    startDate.config.max = {
                        year: date.year,
                        month: date.month - 1,
                        date: date.date,
                        hours: date.hours,
                        minutes: date.minutes,
                        seconds: date.seconds
                    }

                } else {
                    startDate.config.max = {
                        year: '',
                        month: '',
                        date: '',
                        hours: '',
                        minutes: '',
                        seconds: ''
                    }
                }

            }
        });
        var startDate = laydate.render({
            theme: "#23b7e5",
            elem: '#startTimeSearch', //目标元素。由于laydate.js封装了一个轻量级的选择器引擎，因此elem还允许你传入class、tag但必须按照这种方式 '#id .class'
            event: 'click', //响应事件。如果没有传入event，则按照默认的click
            format: 'yyyy-MM-dd HH:mm:ss',
            type: 'datetime',
            max: 0,
            done: function (value, date) {
                if (value !== '') {
                    endDate.config.min = {
                        year: date.year,
                        month: date.month - 1,
                        date: date.date,
                        hours: date.hours,
                        minutes: date.minutes,
                        seconds: date.seconds
                    }
                } else {
                    endDate.config.min = {
                        year: '',
                        month: '',
                        date: '',
                        hours: '',
                        minutes: '',
                        seconds: ''
                    }
                }
            }
        });

        setSize();

        chartssize(document.getElementById("show-panel"), document.getElementById("main"));


        $('.dropdown').on('hide.bs.collapse show.bs.collapse', '.collapse-content', function (e) {
            var $this = $(this);
            $this.parent().parent().prev().find("span").toggleClass("fa-caret-down");
            $this.parent().parent().prev().find("span").toggleClass("fa-caret-right");
        });
    });

    function setSize() {
        var barheight = $("#navbar", window.parent.document).height();//获取当前页面总高度
        var top = barheight + $(".top-div").height() + 20;//顶部页面的高度（注意height计算的高度没有把顶部嵌套的页面高度加进去）
        $(".foot-div").css("top", top);//给底部页面添加绝对路径距离上面高度
        $(".foot-div").height(document.documentElement.clientHeight - top);
    }

    function loadChart() {
        upload = layer.msg('加载中。。。', {
            icon: 16
            , shade: 0.2,
            time: false
        });
        $.ajax({
            type: "POST",
            url: "${ctx!}/web/project/data/chartOne",
            dataType: "json",
            contentType: "application/json;charset=utf-8",
            data: JSON.stringify(queryParams()),
            success: function (rtn) {
                layer.close(upload);
                generateChart(rtn.data);
            }
        });
    }


    function queryParams() {
        let selectedDevices = [];
        $('.dropdown').find('li.active').each(function (index, e) {
            console.log($(e).attr('href'));
            selectedDevices.push($(e).attr('href'));
        });
        return {
            startTimeSearch: $('#eventqueryform input[name=\'startTimeSearch\']').val(),
            endTimeSearch: $('#eventqueryform input[name=\'endTimeSearch\']').val(),
            mode: $('#eventqueryform select[name=\'mode\']').val(),
            selectedDevices: selectedDevices,
        };
    }

    function generateChart(data) {
        //基于准备好的DOM，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'), 'light');
        //指定图表的配置项和数据
        myChart.clear();

        function getSeries() {
            let series = [];
            for (var i = 0; i < data.yLists.length; i++) {
                var e = {
                    name: data.legends[i],
                    type: 'line',
                    smooth: true,
                    data: data.yLists[i],
                };
                series.push(e);
            }
            console.log(JSON.stringify(series));
            return series;
        }

        window.addEventListener('resize', function () {
            myChart.resize()
        });


        // 指定图表的配置项和数据
        var option = {
            textStyle: {
                color: '#fff',
            },
            tooltip: {
                trigger: 'axis'
            },
            title: {
                textStyle: {
                    color: '#fff',
                },
                text: data.title,
                subtext: data.tag,
            },
            legend: {
                textStyle: {
                    color: '#fff',
                },
                data: data.legends,
            },
            xAxis: {
                data: data.xList,
            },
            yAxis: {
                itemStyle: {
                    //柱形图圆角，鼠标移上去效果，如果只是一个数字则说明四个参数全部设置为那么多
                    emphasis: {
                        barBorderRadius: 30
                    },

                    normal: {
                        //柱形图圆角，初始化效果
                        barBorderRadius: [10, 10, 10, 10],
                        label: {
                            show: true,//是否展示
                            position: 'top',
                            textStyle: {
                                fontWeight: 'bolder',
                                fontSize: '12',
                                fontFamily: '微软雅黑',
                            }
                        }
                    }
                },
            },
            series: getSeries(),
        };
        //使用刚指定的配置项和数据显示图表
        myChart.setOption(option);
    }

    function add() {
        layer.open({
            type: 2,
            title: '添加变量',
            shadeClose: true,
            shade: false,
            area: ['600px', '280px'],
            content: '${ctx!}/web/project/data/add',
            end: function (index) {
                location.reload();
            }
        });
    }

    function del() {
        layer.open({
            type: 2,
            title: '删除一级条目',
            shadeClose: true,
            shade: false,
            skin: 'shadows',
            closeBtn: 1,
            area: ['800px', '350px'],
            content: '${ctx!}/web/project/data/delete',
            end: function (index) {
                location.reload();
            }
        });
    }


    // 使用刚指定的配置项和数据显示图表。
    function chartssize(container, charts) {
        function getStyle(el, name) {
            if (window.getComputedStyle) {
                return window.getComputedStyle(el, null);
            } else {
                return el.currentStyle;
            }
        }

        let wi = getStyle(container, 'width').width - 22;
        let hi = getStyle(container, 'height').height - 30;
        charts.style.height = hi;
        charts.style.width = wi;
    }


    window.onresize = function () {
        chartssize(document.getElementById("show-panel"), document.getElementById("main"));
    };

    $(".dropdown").on('click', 'li', function (e) {
        $(this).parent().parent().siblings().find('li').removeClass('active');
        $(this).parent().parent().siblings().find('li a').removeClass('active');
        if ($(this).hasClass("active")) {
            $(this).removeClass('active');
            $(this).find("a").eq(0).removeClass('active');
        } else {
            $(this).addClass('active');
            $(this).find("a").eq(0).addClass('active');
        }

    });
</script>


</body>

</html>
